<template>
	<div>
		<a-modal :title="title" :width="1500" :visible="visible" :confirmLoading="confirmLoading" :footer="null"
			@ok="handleSubmit" @cancel="handleCancel">
			<a-card :bordered="false">
				<div class="table-page-search-wrapper">
					<a-form layout="inline">
						<a-row :gutter="48">

							<a-col :md="8" :sm="24" v-if="false">
								<a-form-item label="订单ID">
									<a-input v-model="queryParam.orderId" placeholder="请输入订单ID" />
								</a-form-item>
							</a-col>
							<a-col :md="6" :sm="24">
								<a-form-item label="物料名称">
									<a-input v-model="queryParam.materialName" placeholder="请输入物料名称" />
								</a-form-item>
							</a-col>
							<a-col :md="6" :sm="24">
								<a-form-item label="料号">
									<a-input v-model="queryParam.materialCode" placeholder="请输入料号" />
								</a-form-item>
							</a-col>
							<a-col :md="4" :sm="24">
								<a-button type="primary" @click="table.refresh(true)">查询</a-button>
								<a-button @click="() => { queryParam = {}; table.refresh(true) }">重置</a-button>
							</a-col>
						</a-row>
					</a-form>
				</div>

				<s-table ref="table" size="default" :columns="columns" :data="loadData" :alert="true" :showPagination="false">
					<!-- <span slot="image" slot-scope="text">
						<image-preview :images="text" />
					</span> -->
					<span slot="image" slot-scope="text,record">
						<image-preview1 :images="text" :imageUrl="record.material.imageUrl" />
					</span>
					<template slot="materialModelNumber" slot-scope="text, record">
						{{ record.material ? record.material.materialModelNumber : '' }}
					</template>
					<template slot="action" slot-scope="text, record">
						<a @click="showChuKuJiLu(record)">出库记录</a>
					</template>

				</s-table>

			</a-card>

		</a-modal>
		<a-modal title="出库记录" :width="1500" :visible="visible1" :footer="null" @cancel="handleCancelJiLu">
			<a-table :columns="columns1" :data-source="chukuList">
				<!-- <template slot="image" slot-scope="text, record">
					<image-preview :images="text" />
				</template> -->
				<span slot="image" slot-scope="text,record">
					<image-preview1 :images="text" :imageUrl="record.material.imageUrl" />
				</span>
			</a-table>
		</a-modal>
	</div>

</template>

<script lang="ts">
import { Component, Vue, Ref, Prop } from "vue-property-decorator";

import { STable } from '@/components'
import { page } from '@/api/modular/main/emsordermaterial/emsOrderMaterialManage'
import { MATERIAL_TYPE_ENUM } from '@/utils/util'
import { page as emsOrderMaterialManagePage } from '@/api/modular/main/emsordermaterial/emsOrderMaterialManage'
import { image } from "html2canvas/dist/types/css/types/image";
@Component({
	components: {
		STable,
	}
})


export default class ProductionOutStoreDetailFormModal extends Vue {
	@Prop({ default: false }) readonly: boolean
	@Prop({ default: MATERIAL_TYPE_ENUM.material.id }) materialType: string | number
	@Ref() readonly table!: any

	title = null
	advanced = false // 高级搜索 展开/关闭
	visible = false
	visible1 = false
	confirmLoading = false
	emsOrder = null

	queryParam = {
		orderId: '',
		materialType: '',
		pageSize: undefined,
		materialName: undefined,
		materialCode: undefined
	}  // 查询参数
	chukuList = []
	columns = [
		{
			title: '产品',
			dataIndex: 'productName',
		},
		{
			title: 'BOM',
			ellipsis: true,
			dataIndex: 'bomName',
			customRender: (text, record, index) => record.bomName || '/',

		},
		{
			title: '物料',
			dataIndex: 'materialName'
		},
		{
			title: '规格',
			dataIndex: 'materialModelNumber',
			scopedSlots: { customRender: 'materialModelNumber' }
		},
		{
			title: '图片',
			dataIndex: 'image',
			scopedSlots: { customRender: 'image' }
		},
		{
			title: '料号',
			dataIndex: 'materialCode'
		},
		{
			title: '序列号',
			dataIndex: 'productRecord.extend1'
		},
		{
			title: '单个数量',
			// dataIndex: 'number',
			customRender: (text, record, index) => record.number % record.productRecord.number == 0 ? record.number / record.productRecord.number :
				(record.number / record.productRecord.number).toFixed(2),
		},
		{
			title: '总数量',
			dataIndex: 'number'
		},
		{
			title: '实际出库数量',
			dataIndex: 'completedNumber'
		},
		{
			title: '多出库数量',
			dataIndex: '',
			customRender: (text, record, index) => `${record.completedNumber > record.number ? record.completedNumber - record.number : ''}`
		},
		{
			title: '操作',
			dataIndex: 'action',
			scopedSlots: { customRender: 'action' }
		},
	]
	columns1 = [
		{
			title: '出库单号',
			dataIndex: 'orderNumber',
		},
		{
			title: '产品',
			dataIndex: 'productName',
		},
		{
			title: 'BOM',
			customRender: (text, record, index) => record.bomCode ? `${record.bomCode}(${record.bomName})` : `/`
		},
		{
			title: '物料',
			dataIndex: 'materialName'
		},
		{
			title: '规格',
			dataIndex: 'materialModelNumber',
			scopedSlots: { customRender: 'materialModelNumber' }
		},
		{
			title: '图片',
			dataIndex: 'image',
			scopedSlots: { customRender: 'image' }
		},
		{
			title: '物号',
			dataIndex: 'materialCode'
		},
		{
			title: '领用方',
			dataIndex: 'classGroupName'
		},
		{
			title: '正常出库数量',
			dataIndex: 'number'
		},
		{
			title: '额外出库数量',
			dataIndex: 'extraNumber'
		},
		{
			title: '出库时间',
			dataIndex: 'createTime'
		},
		// {
		// 	title: '多出库数量',
		// 	dataIndex: '',
		// 	customRender: (text, record, index) => `${record.completedNumber > record.number ? record.completedNumber - record.number : ''}`
		// },
		// {
		// 	title: '操作',
		// 	dataIndex: 'action',
		// 	scopedSlots: { customRender: 'action' }
		// },
	]
	showChuKuJiLu(record) {
		// this.visible1 = true;
		this.getList(record)
	}
	// 加载数据方法 必须为 Promise 对象
	loadData(parameter) {
		this.queryParam.orderId = this.emsOrder?.orderId
		this.queryParam.materialType = this.materialType as string
		this.queryParam.pageSize = -1
		return page(Object.assign(parameter, this.queryParam)).then((res) => {
			res.data.rows.forEach(value => {
				value.normalNumber = 0
			})
			return res.data
		})
	}
	getList(record) {
		emsOrderMaterialManagePage({
			sourceOrderId: this.queryParam.orderId,
			orderType: this.$businessEnum.ORDER_TYPE_ENUM.outOrder.id,
			materialId: record.materialId,
			pageSize: -1
		}).then(res => {
			this.chukuList = res.data.rows;
			this.visible1 = true
		})
	}
	show(record) {
		this.visible = true
		this.emsOrder = record
		this.title = `出库详情（${record.orderNumber}）`
		setTimeout(() => {
			this.handleOk()
		}, 100)
	}

	toggleAdvanced() {
		this.advanced = !this.advanced
	}

	handleOk() {
		this.table.refresh()
	}

	handleSubmit() {
	}

	handleCancel() {
		this.visible = false
	}
	handleCancelJiLu() {
		this.visible1 = false
	}
}
</script>

<style lang="less">
.table-operator {
	margin-bottom: 18px;
}

button {
	margin-right: 8px;
}
</style>
